<template>
  <div>
    <van-nav-bar title="商品详情页" left-text="返回" left-arrow @click-left="onClickLeft" fixed />
    <!-- 轮播 -->
    <div class="about_swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="blue">
        <van-swipe-item v-for="(item ,index) in shoplist.imgs" :key="index">
          <img :src="item" alt width="100%" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="shoplist_item_content">
      <p>{{shoplist.title}}</p>
      <div class="shoplist_title">商品展示</div>
    </div>
    <div>
      <img :src="shoplist.detailPics" alt width="100%" />
    </div>
    <!-- 提交 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="cartList.length" @click="gotoCart" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button type="warning" text="加入购物车" @click="jiaru" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <!-- 商品弹框 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      shoplist: [], //原来的数组
      cartList: JSON.parse(localStorage.getItem('cartList')) || []
    };
  },
  // created() {
  //   let list = localStorage.list;
  //   if (list != undefined) {
  //     this.cartList = JSON.parse(list);
  //   }
  // },
  mounted() {
    var id = this.$route.query.id;
    console.log(id);
    this.$network
      .getStoreshop({
        params: {
          id
        }
      })
      .then(res => {
        this.shoplist = res.data.data.data;
        console.log(this.shoplist);
        this.shoplist.imgs = this.shoplist.imgs.split(",");
      });
  },
  methods: {
    onClickLeft() {
      window.history.back();
    },
    // 点击加入购物车
    jiaru() {
      var isShow = false;
      this.cartList.map(ele => {
        if (ele.list.id == this.shoplist.id) {
          ele.count++
          isShow = true;
          return;
        }
      });
     if(!isShow){
     
        this.cartList.push({
          list:this.shoplist,
          count:1
        })
     }
      localStorage.cartList = JSON.stringify(this.cartList);
    },
    gotoCart() {
      this.$router.push({
        path: "/cart"
      });
    }
  }
};
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  /* line-height: 150px; */
  text-align: center;
}

.shoplist_title {
  /* width: 100%; */
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 20px;
}
.about_swiper {
  margin-top: 64px;
}
</style>